<template>
  <div class="mid">
    <div class="display_index">
      <div class="content">
        <el-row :gutter="16">
          <el-col :span="10" :offset="1" class="c0">
            <div style="margin-top: 15px">
              <el-input
                placeholder="请输入内容"
                v-model="input"
                class="input-with-select"
              >
                <el-button slot="append" icon="el-icon-search"></el-button>
              </el-input>
            </div>
          </el-col>
        </el-row>
        <div v-for="(item, index) in productList" :key="item.productId">
          <div :class="'con c' + (index + 1)" @click="toDisplayItem(index)">
            <div
              class="imghid"
              @mouseover="loadImageHover(index)"
              @mouseleave="loadImageUnhover(index)"
            >
              <div
                class="img"
                :style="
                  'background-image:url(http://127.0.0.1:9090' + item.img1 + ')'
                "
              ></div>
            </div>
            <div class="txt">
              <h2 v-text="item.name">Persian</h2>
              <p v-text="item.description">
                &emsp;&emsp;Friendly house cat, doubles as a princess
              </p>
            </div>
          </div>
        </div>
      </div>
      <div class="pri">
        <div class="prihead">
          <a href="join.html">
            <div class="tx"></div>
          </a>
          <h2>{{ category }}</h2>
          <p v-text="descn">嗷呜~</p>
        </div>
        <div class="tag">
          <h2 v-text="OneNote.tag">TAG</h2>
          <p v-text="OneNote.content" class="text_onenote"></p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import $ from "jquery";

//等待实现
// 1. 获取productList的个数 productList.length
// 2. 开始进入时设置图片的样式  测试api：获取随机图片https://unsplash.it/1600/900?random
// 3. 动态渲染css样式，cx（x：1->productList.length）

export default {
  data() {
    return {
      input: "",
      category: "",
      //每日一句
      OneNote: {
        tag: "",
        content: "",
      },
      //接收后台数据
      productList: [],
      //大类描述(头像下面)
      descn: "",
    };
  },
  mounted() {
    this.loadOneNote();
    // console.log("接收过来的值为：" + this.$route.params.category);
    this.category = this.$route.params.category;
    this.loadProductList();
  },
  methods: {
    change(e) {
      this.$forceUpdate();
    },
    //  每日一句的api接口
    loadOneNote() {
      this.$axios({
        methods: "get",
        url: "https://api.xygeng.cn/one",
      })
        .then((res) => {
          var res = res.data.data;
          this.OneNote = res;
        })
        .catch((err) => {
          console.log("请求每日一句错误");
        });
    },
    // 根据categoryId加载大类头像，并且获取productList
    loadProductList() {
      //加载大类头像
      let picUrl;
      switch (this.category) {
        case "DOGS":
          this.descn = "狗是唯一爱你甚过你爱你自己的生物。";
          picUrl = require("../assets/dog_cute.jpg");
          break;
        case "CATS":
          this.descn = "纤钩时得小溪鱼，饱卧花阴兴有余。";
          picUrl = require("../assets/cat_cute.jpg");
          break;
        case "FISH":
          this.descn = "小鱼出水圆纹见。";
          picUrl = require("../assets/fish_cute.jpg");
          break;
        case "REPTILES":
          this.descn = "2013年CNN评选的世界最可爱物种排行榜上排名第十七。";
          picUrl = require("../assets/reptile_cute.jpg");
          break;
        case "BIRDS":
          this.descn = "月出惊山鸟，时鸣春涧中。";
          picUrl = require("../assets/bird_cute.jpg");
          break;
        default:
          this.descn = "欢迎光临宠物商店！";
          picUrl = "../assets/cat_cute.jpg";
      }
      $(".tx").css("background-image", "url(" + picUrl + ")");
      console.log(
        "%c" + "picUrl",
        "background: #336699; color: #fff; border-radius:3px; font-size:14px;  font-family:" +
          "微软雅黑"
      );

      console.log(picUrl);
      //获取productList信息
      this.$axios({
        methods: "get",
        url: `http://127.0.0.1:9090/catalog/category/${this.category}/products`,
      })
        .then((res) => {
          var res = res.data;
          console.log(res);
          this.productList = res.data;
          if (this.productList.length <= 2) {
            $(".mid").css({
              height: "100vh",
              paddingBottom: "0",
              paddingTop: "20px",
            });
          }
        })
        .catch((err) => {
          console.log("请求productList错误");
        });
    },
    //获取图片（鼠标未置于上方）
    loadImageUnhover(index) {
      //1. 获取对应标签index ok
      //2. 用jquery查询获取对应标签 col index ok
      //3. 修改相应标签的backgroundImage ok
      //4. 通过两个方法hover /unhover来控制显现 ok
      console.log(this.productList[index].img1);
      let picUrl = "http://127.0.0.1:9090" + this.productList[index].img1;
      index++;
      $(".c" + index + " .img").css("background-image", "url(" + picUrl + ")");
      console.log(picUrl);
    },
    //获取图片（鼠标置于上方）
    loadImageHover(index) {
      console.log(this.productList[index].img1);
      let picUrl = "http://127.0.0.1:9090" + this.productList[index].img2;
      index++;
      $(".c" + index + " .img").css("background-image", "url(" + picUrl + ")");
      console.log(picUrl);
    },
    //跳转页面到item列表
    toDisplayItem(index) {
      this.$router.push({
        name: "DisplayItem",
        params: {
          product: this.productList[index].productId,
        },
      });
    },
  },
};
</script>

<style scoped>
@charset "utf-8";
body {
  margin: 0;
  padding: 0;
}
nav {
  position: fixed;
  display: flex;
  justify-content: space-around;
  align-items: center;
  width: 1540px;
  height: 70px;
  top: 0px;
  background-color: rgb(123, 161, 197);
  overflow: hidden;
  font-size: 20px;
  color: rgb(234, 247, 255);
  opacity: 0.8;
  z-index: 1000;
}
.homenav {
  animation: load2 1s linear;
}

nav:hover {
  opacity: 0.95;
}
nav .navtitle {
  padding-left: 50px;
  width: 30%;
}
nav .navtitle strong {
  font-size: 50px;
  font-weight: bolder;
}
nav a {
  display: block;
  justify-content: center;
  text-decoration: none;
  z-index: 1;
  height: inherit;
  line-height: 70px;
  width: 120px;
  text-align: center;
  font-weight: bolder;
  color: rgb(84, 109, 158);
  transition: 0.5s;
}
nav .navanim {
  position: absolute;
  height: inherit;
  z-index: 0;
  background: rgb(155, 200, 240);
  border-radius: 5px;
  left: 0px;
  transition: all 0.5s ease 0s;
  width: 120px;
}
nav .home,
a:nth-child(2):hover ~ .navanim {
  width: 120px;
  left: 535px;
}

nav .about,
a:nth-child(3):hover ~ .navanim {
  width: 120px;
  left: 670px;
}

nav .blog,
a:nth-child(4):hover ~ .navanim {
  width: 120px;
  left: 810px;
}

nav .album,
a:nth-child(5):hover ~ .navanim {
  width: 120px;
  left: 950px;
}
nav .join,
a:nth-child(6):hover ~ .navanim {
  width: 120px;
  left: 1085px;
}
nav .none {
  width: 20%;
}

@keyframes load2 {
  0% {
    top: -80px;
    opacity: 0;
  }
  100% {
    top: 0px;
    opacity: 0.8;
  }
}

body {
  margin: 0;
  padding: 0;
  background-image: url(../assets/background.jpg);
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  overflow-x: hidden;
}

::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-thumb {
  background: rgba(91, 105, 136, 0.8);
}

::-webkit-scrollbar-track {
  background: rgb(194, 213, 241);
}

.foot {
  margin-top: 0px;
  width: 100vw;
  height: 100px;
  float: left;
  clear: both;
  text-align: center;
  margin-bottom: 0px;
  background-color: rgba(84, 132, 161, 0.8);
}

.foot p {
  line-height: 10px;
  color: rgb(28, 43, 43);
}

.mid {
  height: max-content;
  width: 100vw;
  padding-bottom: 20px;
  padding-top: 20px;
}

.content {
  padding-top: 60px;
  padding-left: 20%;
  display: flex;
  flex-direction: column;
}

.con {
  display: flex;
  width: 650px;
  height: 200px;
  background: rgba(208, 220, 230, 0.2);
  backdrop-filter: blur(0.2);
  float: left;
  clear: left;
  margin-top: 30px;
  backdrop-filter: blur(30px);
  border-radius: 15px;
  overflow: hidden;
  box-shadow: 0 0 15px rgba(103, 122, 138, 0.8);
}

.c0 {
  animation: c0load 0.25s linear;
}

.c1 {
  animation: c1load 0.5s linear;
}

.c2 {
  animation: c2load 1s linear;
}

.c3 {
  animation: c3load 1.5s linear;
}

.c4 {
  animation: c4load 2s linear;
}
.c5 {
  animation: c5load 2.5s linear;
}
.c6 {
  animation: c6load 3s linear;
}
.c7 {
  animation: c7load 3.5s linear;
}
.c8 {
  animation: c8load 4s linear;
}
.c9 {
  animation: c9load 4.5s linear;
}

.c1 .img {
  /* background-image: url("../assets/project1.png"); */
  background-image: url("../assets/cat1.jpg");
  /* background-image: var(--imgpic); */
}

.c1 .img:hover {
  /* background-image: url("../assets/project12.png"); */
  background-image: url("../assets/cat12.jpg");
}

.c2 .img {
  /* background-image: url("../assets/project22.png"); */
  background-image: url("../assets/cat2.jpg");
}

.c2 .img:hover {
  /* background-image: url("../assets/project21.png"); */
  background-image: url("../assets/cat22.jpg");
}

.c3 .img {
  background-image: url("../assets/cat2.jpg");
}

.c3 .img:hover {
  background-image: url("../assets/cat22.jpg");
}

.imghid {
  overflow: hidden;
  width: 250px;
}

.con .img {
  width: 250px;
  height: 100%;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  opacity: 0.8;
  transition: 0.5s ease 0s;
}

.con .img:hover {
  transform: scale(1.1);
}

.con .txt {
  width: 400px;
  padding: 0 40px;
  color: rgb(25, 39, 49);
  font-family: "幼圆";
}

.con .txt h2 {
  color: rgb(53, 75, 104);
}

.pri {
  height: 500px;
  width: 300px;
  float: right;
  clear: right;
  position: fixed;
  /* margin-top: -1500px; */
  top: 140px;

  margin-left: 1100px;
  animation: priload 2s linear;
}

.pri .prihead {
  height: 250px;
  background-color: rgb(229, 239, 243);
  border-radius: 20px;
  padding-top: 50px;
  box-shadow: 0 0 8px rgba(39, 69, 88, 0.6);
}

.prihead a {
  display: block;
  overflow: hidden;
  border-radius: 50%;
  width: 90px;
  margin: auto;
  border: 3px groove rgb(35, 82, 121);
}

.pri .prihead .tx {
  width: 90px;
  height: 90px;
  border-radius: 50%;
  /* background-image: url("../assets/tx.png"); */
  background-image: url("../assets/dog_cute.jpg");
  background-size: cover;
  transition: 0.5s ease 0s;
}

.prihead .tx:hover {
  transform: scale(1.1);
}

.prihead h2 {
  color: rgb(32, 76, 97);
  text-align: center;
}

.prihead p {
  color: rgb(118, 175, 185);
  text-align: center;
}

.pri .tag {
  height: 200px;
  background-color: rgb(229, 239, 243);
  margin-top: 50px;
  border-radius: 20px;
  box-shadow: 0 0 8px rgba(39, 69, 88, 0.6);
}

.tag h2 {
  text-align: center;
  padding-top: 20px;
  color: rgb(56, 117, 158);
  font-weight: bolder;
}

.tag p {
  word-wrap: break-word;
  display: block;
  width: 220px;
  padding-left: 40px;
  color: rgb(109, 166, 168);
}

@keyframes c0load {
  0% {
    opacity: 0;
  }

  60% {
    opacity: 0;
    margin-top: 100px;
  }

  100% {
    opacity: 1;
    margin-top: 40px;
  }
}

@keyframes c1load {
  0% {
    opacity: 0;
  }

  70% {
    opacity: 0;
    margin-top: 100px;
  }

  100% {
    opacity: 1;
    margin-top: 40px;
  }
}

@keyframes c2load {
  0% {
    opacity: 0;
  }

  80% {
    opacity: 0;
    margin-top: 100px;
  }

  100% {
    opacity: 1;
  }
}

@keyframes c3load {
  0% {
    opacity: 0;
  }

  90% {
    opacity: 0;
    margin-top: 100px;
  }

  100% {
    opacity: 1;
  }
}

@keyframes c4load {
  0% {
    opacity: 0;
  }

  90% {
    opacity: 0;
    margin-top: 100px;
  }

  100% {
    opacity: 1;
  }
}
@keyframes c5load {
  0% {
    opacity: 0;
  }

  90% {
    opacity: 0;
    margin-top: 100px;
  }

  100% {
    opacity: 1;
  }
}
@keyframes c6load {
  0% {
    opacity: 0;
  }

  90% {
    opacity: 0;
    margin-top: 100px;
  }

  100% {
    opacity: 1;
  }
}

@keyframes priload {
  0% {
    opacity: 0;
  }

  80% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

/* .display_index{  
  overflow: hidden;
  position: absolute;
  top: 70%;
  left: 20%;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  color: #336699;

  display: flex;
  flex-direction: column;
}  */

.text_onenote {
  /* display: block;
  word-break: keep-all;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis; */
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 5;
  /* 字数过多以省略号结尾 */
}
</style>
